<template>
  <div class="goodStoresTitle">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">商品</el-menu-item>
      <el-menu-item index="2">
        <span v-if="storeType=='LS' || storeType=='SX'">组合商品</span>
        <span v-else>套餐</span>
      </el-menu-item>
      <el-menu-item index="3"  v-if="storeType!='SX' && storeType!='LS' ">原料</el-menu-item>
      <el-menu-item index="4" v-if="storeType!='HB' && storeType!='SX' && storeType!='LS' ">成本卡</el-menu-item>
      <el-menu-item index="5">单位</el-menu-item>
      <el-menu-item index="6" v-if="storeType=='HB'">加工关系</el-menu-item>
    </el-menu>
    <div class="storeName">
      <el-button type="text" size="medium" @click="goBack" style="margin-right: 20px">>>返回</el-button>
      <span>[{{storeTypeName}}]-{{dishKuName}}</span></div>
    <div style="height: 15px;"></div>
    <el-tabs v-model="activityName" v-if="activeIndex!=2 && activeIndex!=4 && activeIndex!=5 && activeIndex!=6" type="border-card" @tab-click="tabChange">
      <el-tab-pane v-if="activeIndex==1" name="/dishesMessage" label="商品管理">
        <div class="page-content">
          <router-view v-if="selectDishesMessage()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==1 && (storeType=='ZC' || storeType=='KC')" name="/normManagement" label="规格管理">
        <div class="page-content">
          <router-view v-if="selectNormManagement()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==1 && (storeType=='ZC' || storeType=='KC' || storeType=='HB')" name="/makeMethod"  label="做法管理">
        <div class="page-content">
          <router-view v-if="selectMakeMethod()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==1 && (storeType=='ZC' || storeType=='KC' || storeType=='HB')" name="/addMaterial" label="加料管理">
        <div class="page-content">
          <router-view v-if="selectAddMaterial()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==1" name="/dishesCategorys" label="商品分类">
        <div class="page-content">
          <router-view v-if="selectDishesCategorys()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==1 && (storeType=='SX' || storeType=='LS')" name="/brands" label="品牌管理">
        <div class="page-content">
          <router-view v-if="selectBrands()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==3" name="/dishesMaterials" label="原料管理">
        <div class="page-content">
          <router-view v-if="selectmaterial()"></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="activeIndex==3" name="/dishesMCategorys" label="原料类别">
        <div class="page-content">
          <router-view v-if="selectMaterialCategory()"></router-view>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="page-content" v-if="activeIndex==2">
      <router-view v-if="selectDishesPackages()"></router-view>
    </div>
    <div class="page-content"  v-if="activeIndex==5">
      <router-view v-if="selectDishesUnit()"></router-view>
    </div>
     <div class="page-content" v-if="activeIndex==4 && (storeType=='ZC' || storeType=='KC')">
      <router-view v-if="selectDishesMaterialCosts()"></router-view>
    </div>
     <div class="page-content" v-if="activeIndex==6 && (storeType=='HB')">
      <router-view v-if="selectOrderRelationship()"></router-view>
    </div>

  </div>
</template>
<script>
//注意路径
export default {
  data() {
    return {
      activityName: "/dishesMessage",
      activeIndex:'1',
      storeType: window.localStorage.getItem("dishKuType"),
      dishKuName: window.localStorage.getItem("dishKuName"),
      storeTypeName:"",
    };
  },
  watch: {
    $route(newValue, oldValue) {

      if(this.storeType=='KC'){
        this.storeTypeName = "快餐";
      }else if(this.storeType=='ZC'){
        this.storeTypeName = "中餐";
      }else if(this.storeType=='HB'){
        this.storeTypeName = "烘焙";
      }else if(this.storeType=='SX'){
        this.storeTypeName = "生鲜";
      }else if(this.storeType=='LS'){
        this.storeTypeName = "零售";
      }


      var path = this.$route.fullPath;
      if (path == "/dishesMessage") {
        this.goHome();
        return;
      }


      console.log(path);
      if (path.startsWith("/dishesMessage")) {
        this.activityName = "/dishesMessage";
      } else if (path.startsWith("/normManagement")) {
        this.activityName = "/normManagement";
      } else if (path.startsWith("/makeMethod")) {
        this.activityName = "/makeMethod";
      } else if (path.startsWith("/addMaterial")) {
        this.activityName = "/addMaterial";
      } else if (path.startsWith("/dishesCategorys")) {
        this.activityName = "/dishesCategorys";
      } else if (path.startsWith("/dishesPackages")) {
        this.activityName = "/dishesPackages";
      } else if (path.startsWith("/dishesUnits")) {
        this.activityName = "/dishesUnits";
//        this.router.push({ path: "/dishesUnits/dataTable" });
      } else if(path.startsWith("/dishesMaterials")){
        this.activityName = "/dishesMaterials";
      }else if(path.startsWith("/dishesMCategorys")){
        this.activityName = "/dishesMCategorys";
      }else if(path.startsWith("/dishesCosts")){
        this.activityName = "/dishesCosts";
//        this.router.push({ path: "/dishesCosts/dataTable" });
      }else if(path.startsWith("/brands")){
        this.activityName = "/brands";
      }else{
        this.activityName = this.$route.fullPath;
      }
    }
  },
  created() {
    window.this = this;
    this.goHome();
  },
  methods: {
    handleSelect(key, keyPath){
      this.activeIndex = key;
      if(this.activeIndex==1){
        this.activityName = "/dishesMessage";
      }else if(this.activeIndex==2){
       this.router.push({ path: "/dishesPackages/dataTable" });
       return;
      }else if(this.activeIndex == 3){
        this.activityName = "/dishesMaterials";
      }else if(this.activeIndex == 4){
        this.activityName = "/dishesCosts";
        this.router.push({ path: "/dishesCosts/dataTable" });
        return;
      } else if(this.activeIndex == 5){
        this.router.push({ path: "/dishesUnits/dataTable" });
        this.activityName="/dishesUnits";
        return;
      }else if(this.activeIndex == 6){
        this.router.push({ path: "/orderRelationship/dataTable" });
        this.activityName="/orderRelationship";
        return;
      }
      var active = {name:this.activityName};
      this.tabChange(active);
    },
    goBack() {
      this.router.push({ path: "/vegetableDepot" });
    },
    goHome() {
      this.activityName = "/dishesMessage";
      this.router.push({ path: "/dishesMessage/dataTable" });
    },
    tabChange(active) {
      this.activityName = active.name;
      if (active.name == "/dishesMessage") {
        this.router.push({ path: "/dishesMessage/dataTable" });
      } else if (active.name == "/normManagement") {
        this.router.push({ path: "/normManagement/dataTable" });
      } else if (active.name == "/makeMethod") {
        this.router.push({ path: "/makeMethod/dataTable" });
      } else if (active.name == "/addMaterial") {
        this.router.push({ path: "/addMaterial/dataTable" });
      } else if (active.name == "/dishesCategorys") {
        this.router.push({ path: "/dishesCategorys/dataTable" });
      } else if (active.name == "/dishesPackages") {
        this.router.push({ path: "/dishesPackages/dataTable" });
      } else if (active.name == "/dishesUnits") {
        this.router.push({ path: "/dishesUnits/dataTable" });
      } else if(active.name == "/dishesMaterials"){
        this.router.push({path:"/dishesMaterials/dataTable"});
      }else if(active.name == "/dishesMCategorys"){
        this.router.push({path:"/dishesMCategorys/dataTable"});
      }else if(active.name == "/dishesCosts"){
        this.router.push({path:"/dishesCosts/dataTable"});
      }else if(active.name == "/orderRelationship"){
        this.router.push({path:"/orderRelationship/dataTable"});
      }else if(active.name == '/brands'){
        this.router.push({path:"/brands/dataTable"});
      }else {
        this.router.push({ path: active.name });
      }
    },
    selectMakeMethod() {
      return this.activityName.startsWith("/makeMethod");
    },
    selectNormManagement() {
      return this.activityName.startsWith("/normManagement");
    },
    selectAddMaterial() {
      return this.activityName.startsWith("/addMaterial");
    },
    selectDishesCategorys() {
      return this.activityName.startsWith("/dishesCategorys");
    },
    selectDishesPackages() {
      return this.activityName.startsWith("/dishesPackages");
    },
    selectDishesMessage() {
      return this.activityName.startsWith("/dishesMessage");
    },
    selectDishesUnit(){
      return this.activityName.startsWith("/dishesUnits");
    },
    selectmaterial(){
      return this.activityName.startsWith("/dishesMaterials");
    },
    selectMaterialCategory(){
      return this.activityName.startsWith("/dishesMCategorys");
    },
    selectDishesMaterialCosts(){
      return this.activityName.startsWith("/dishesCosts");
    },
    selectOrderRelationship(){
      return this.activityName.startsWith("/orderRelationship");
    },
    selectBrands(){
      return this.activityName.startsWith("/brands");
    }
  }
};
</script>
<style scoped>
  .storeName{
    position: fixed;
    right:30px;
    top: 110px;
    font-weight: 600;
    /*color: #1ab394;*/
  }
</style>
